<!-- 通知详细页面，在首页的通知简讯页面点击小卡片就会跳转到这个页面 -->
<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import api from "@/utils/api";
import { BASE_URL } from "@/config";

const route = useRoute();
const router = useRouter();
const notice = ref(null);

const fetchNoticeDetail = async () => {
  try {
    const id = route.params.id;
    const res = await api.get(`/notices/${id}`);
    if (res.data.code === 200) {
      const data = res.data.data;
      // ⚙️ 转换 images 为数组（后端存的是 JSON 字符串）
      if (typeof data.images === "string") {
        try {
          data.images = JSON.parse(data.images);
        } catch {
          data.images = [];
        }
      }
      notice.value = data;
    }
  } catch (err) {
    console.error("获取详情失败:", err.response?.data || err.message);
    alert("该通知不存在");
    router.push({ name: "NoticeList" }); // 返回通知列表
  }
};

const goBack = () => {
  router.push({
    name: "HomePage",
    query: { tab_active: "notifications" },
  }); // 返回上一页
};

// 拼接完整图片 URL
const getFullUrl = (path) => {
  if (!path) return "";
  if (path.startsWith("http")) return path;
  return `${BASE_URL}${path.startsWith("/") ? path.slice(1) : path}`;
};

onMounted(() => {
  fetchNoticeDetail();
});
</script>

<template>
  <div class="global-bg" style="min-height: 1000px">
    <header class="g-header">
      <div class="g-header-container">
        <h1 class="g-logo">ipss课题组-通知简讯</h1>
        <div class="g-login-btn-container">
          <button id="g-loginBtn" class="g-login-btn" @click="goBack">
            返回上一页
          </button>
        </div>
      </div>
    </header>

    <el-row v-if="notice" style="padding: 20px; margin-top: 50px">
      <el-col :span="14" :offset="5">
        <el-card style="border-radius: 20px" shadow="always">
          <h2 style="margin-bottom: 10px; text-align: center">
            {{ notice.title }}
          </h2>
          <p style="text-align: center">
            发布人:
            <el-tag> {{ notice.student_id || "未知发布人" }}</el-tag>
          </p>
          <p style="text-align: center">
            联系方式:
            <el-tag> {{ notice.contact || "未知发布人" }}</el-tag>
          </p>
          <p style="text-align: center">
            发布日期:
            <el-tag>{{ new Date(notice.created_at).toLocaleString() }}</el-tag>
          </p>
          <el-divider />
          <p style="margin: 15px 0; font-weight: bold">
            <el-tag type="warning" style="margin-right: 10px">简要描述: </el-tag
            >{{ notice.summary }}
          </p>
          <el-divider />
          <div style="line-height: 1.8; white-space: pre-line">
            {{ notice.content }}
          </div>

          <!-- ✅ 图片展示区 -->
          <div
            v-if="notice.images && notice.images.length"
            class="image-gallery"
          >
            <el-image
              v-for="(img, index) in notice.images"
              :key="index"
              :src="getFullUrl(img)"
              :preview-src-list="notice.images.map((i) => getFullUrl(i))"
              fit="contain"
              style="
                width: auto;
                height: auto;
                border-radius: 12px;
                margin: 20px;
              "
            />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
</style>
